<template>
    <div class="subDiv">这是子模块的地盘了<br>
        <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
        <h2>姓名：{{person.name}}</h2>
        <h2>年龄：{{person.age}}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="chargeAge">增长年龄</button>
        <button @click="chargePerson">修改人</button>
    </div>
    
</template>

<script setup lang="ts" name="Person">
    import { watch,ref } from 'vue';

    let person=ref({
        name:'张三',
        age:18
    })

    function changeName(){
        person.value.name+='~';
    }
    function chargeAge(){
        person.value.age++;
    }
    function chargePerson(){
        console.log('修改整个人');
        person.value={name:'李四',age:30}
        
    }

    //情况二：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，则需要手动开启深度监视{deep:true}
    // {deep:true,immediate:true} immediate:true 加上这个属性，则表示监视的回调会立即执行一次，如果不加，开始的时候不会执行
    // 如果修改的是整个对象，则回调函数的参数newValue和oldValue的值不一样，分别是修改前后的对象
    // 如果修改的是对象的属性，则回调函数的参数newValue和oldValue的值一样，都是修改后的对象
    // 第一个参数：监控对象；第二个参数：回调函数；3.配置对象，可以配置deep和immediate
    watch(person,(newValue,oldValue)=>{
        console.log('整个人都变了',newValue,oldValue);
    },{deep:true})
   
</script>

<style scoped>
    .subDiv{
        color:blue;
        background-color:rgb(210, 205, 205);
        width: 800px;
        height: 300px;
        font-size: 15px;
        }
    button{
        width: 100px;
        height: 30px;
        font-size: 15px;
        }
</style>